<template>
  <div :class="classes">
    <div :class="saturationClass"
         :style="{background: bgColor}"
         ref="container"
         @mousedown="handleMouseDown">
      <div :class="whiteClass"></div>
      <div :class="blackClass"></div>
      <div :class="pointerClass" :style="{top: pointerTop, left: pointerLeft}">
        <div :class="circleClass"></div>
      </div>
    </div>
  </div>
</template>
<script>
import throttle from 'lodash.throttle'
import config from '../../../../config/config.js'
// prefix
const prefixCls = config.prefix + '-color-picker'
export default {
  // 饱和度
  name: 'Saturation',
  props: {
    value: Object
  },
  data () {
    return {
      prefixCls: prefixCls
    }
  },
  computed: {
    classes () {
      return [
                    `${prefixCls}-saturation-wrapper`
      ]
    },
    saturationClass () {
      return [
                    `${prefixCls}-saturation`
      ]
    },
    whiteClass () {
      return [
                    `${prefixCls}-saturation--white`
      ]
    },
    blackClass () {
      return [
                    `${prefixCls}-saturation--black`
      ]
    },
    pointerClass () {
      return [
                    `${prefixCls}-saturation-pointer`
      ]
    },
    circleClass () {
      return [
                    `${prefixCls}-saturation-circle`
      ]
    },
    colors () {
      return this.value
    },
    bgColor () {
      return `hsl(${this.colors.hsv.h}, 100%, 50%)`
    },
    pointerTop () {
      return (-(this.colors.hsv.v * 100) + 1) + 100 + '%'
    },
    pointerLeft () {
      return this.colors.hsv.s * 100 + '%'
    }
  },
  methods: {
    throttle: throttle((fn, data) => { fn(data) }, 20,
      {
        leading: true,
        trailing: false
      }),
    handleChange (e, skip) {
      !skip && e.preventDefault()
      const container = this.$refs.container
      const containerWidth = container.clientWidth
      const containerHeight = container.clientHeight
      const xOffset = container.getBoundingClientRect().left + window.pageXOffset
      const yOffset = container.getBoundingClientRect().top + window.pageYOffset
      const pageX = e.pageX || (e.touches ? e.touches[0].pageX : 0)
      const pageY = e.pageY || (e.touches ? e.touches[0].pageY : 0)
      let left = pageX - xOffset
      let top = pageY - yOffset
      if (left < 0) {
        left = 0
      } else if (left > containerWidth) {
        left = containerWidth
      } else if (top < 0) {
        top = 0
      } else if (top > containerHeight) {
        top = containerHeight
      }
      const saturation = left / containerWidth
      let bright = -(top / containerHeight) + 1
      bright = bright > 0 ? bright : 0
      bright = bright > 1 ? 1 : bright
      this.throttle(this.onChange, {
        h: this.colors.hsv.h,
        s: saturation,
        v: bright,
        a: this.colors.hsv.a,
        source: 'hsva'
      })
    },
    onChange (param) {
      this.$emit('change', param)
    },
    handleMouseDown () {
      // this.handleChange(e, true)
      window.addEventListener('mousemove', this.handleChange)
      window.addEventListener('mouseup', this.handleChange)
      window.addEventListener('mouseup', this.handleMouseUp)
    },
    handleMouseUp () {
      this.unbindEventListeners()
    },
    unbindEventListeners () {
      window.removeEventListener('mousemove', this.handleChange)
      window.removeEventListener('mouseup', this.handleChange)
      window.removeEventListener('mouseup', this.handleMouseUp)
    }
  }
}
</script>
